<template>
	<view class="page-view flex flex-direction">
		<cu-custom ref="cuCustom" :isBack="true">
			<template slot="backText">
				返回
			</template>
		</cu-custom>
		<view class="notice flex align-center ">
			<image src="/static/notice.png" mode="widthFix"></image>
			<text class="flex-sub">温馨提示：往年有调剂，今年大概率也会有调剂，可以提前与我们沟通选定范围</text>
		</view>
		<view class="group  bg-white">
			<view class="title">请问您想调剂到什么专业？</view>
			<picker mode="selector" :value="major" @change="selectMajor" :range="majorList" range-key="text">
				<view class="inputbox align-center flex">
					<text class="flex-sub">{{ majorList[major] ? majorList[major].text : '选择专业' }}</text>
					<text class="cuIcon-unfold"></text>
				</view>
			</picker>
		</view>
		<view class="group  bg-white">
			<view class="title">想去什么地方？</view>
			<picker mode="selector" :value="area" @change="selectArea" :range="areaList" range-key="text">
				<view class="inputbox align-center flex">
					<text class="flex-sub">{{ areaList[area] ? areaList[area].text : '选择省份' }}</text>
					<text class="cuIcon-unfold"></text>
				</view>
			</picker>
		</view>
		<view class="flex-sub bg-white">
			<contact></contact>
			<!-- <navigator hover-class="none" url="/pages/schoollist/schoollist?major=MBA&area=area01" class="next">下一步</navigator> -->
			<view @click="jumpSchools" class="next">下一步</view>
		</view>
	</view>
</template>

<script>
import contact from '@/components/contact.vue';
export default {
	data() {
		return {
			majorList: ['MBA', 'MPA', 'MEM', 'MTA'],
			major: '',
			areaList: [],
			area: ''
		};
	},
	components: { contact },
	created() {
		// this.getAreasOrMajor('area');
		this.getAreasOrMajor('major');
	},
	methods: {
		//立即估算
		jumpSchools() {
			if (this.major && this.area) {
				uni.navigateTo({
					url: '/pages/schoollist/schoollist?major=' + this.majorList[this.major].value + '&area=' + this.areaList[this.area].value
				});
			} else {
				uni.showToast({
					title: '请选择专业与区域',
					icon: 'none'
				});
			}
		},
		selectMajor(e) {
			console.log('e', e);
			this.major = e.detail.value;
			this.$getajax(this.$api.getAreaByMajor, {
				major: this.majorList[e.detail.value].value
			}).then(da => {
				if (da.code == 200) {
					this.areaList = da.data.map(item => {
						return {
							value: item.code,
							text: item.name,
							isInterview: false
						};
					});
				}
			});
		},
		selectArea(e) {
			console.log('e', e);
			this.area = e.detail.value;
		},
		getAreasOrMajor(optiontype) {
			this.$getajax(this.$api.getAreasOrMajor, {
				optiontype
			}).then(da => {
				let list = [];
				if (da.code == 200 && da.data && da.data.length > 0) {
					list = da.data.map(item => {
						return {
							value: item.code,
							text: item.name,
							isInterview: false
						};
					});
				}
				if (optiontype == 'area') {
					this.areaList = list;
				} else {
					this.majorList = list;
				}
			});
		}
	}
};
</script>

<style scoped lang="less">
.page-view {
	height: 100vh;
}
.notice {
	margin-top: 15upx;
	background: #fff;
	height: 53upx;
	color: #eb1e1e;
	font-size: 20upx;
	padding: 0 25upx;
	image {
		display: block;
		width: 27upx;
		height: 27upx;
	}
}
.group {
	margin-top: 15upx;
	padding: 25upx 45upx 20upx;
	.title {
		color: #020202;
		font-size: 33upx;
		padding-left: 15upx;
		margin-bottom: 23upx;
	}
	.inputbox {
		background: #f3f3f3;
		line-height: 63upx;
		padding: 0 30upx;
		font-size: 30upx;
	}
	& + .group {
		margin-bottom: 15upx;
	}
}
.next {
	width: 371upx;
	line-height: 54upx;
	margin: 80upx auto 0;
	background: #de715d;
	color: #fff;
	text-align: center;
	font-size: 26upx;
	border-radius: 40upx;
}
</style>
